шпаргалки блогерши

оформление цитат в современном стиле

noreply@blogger.com (Вика) — Mon, 07 Aug 2023 14:15:00 +0000

Доброго времени суток, друзья. Пост обновлён и дополнен информацией Красиво оформленные цитаты в тексте не только элемент дизайна. Оформлению цитат в сообщениях стоит уделять особое внимание, ведь красиво оформленный участок текста лучше воспринимается читателем. В первую очередь цель цитирования — это привлечь внимание посетителя.

Чтобы указать цитату в тексте, необходимо отметить её кавычками – никаких дополнительных действий делать не нужно.

Много уже написано, как можно выделить цитату в тексте. Предлагаю вам подборку ещё нескольких видов оригинального оформления цитат на страницах блога.

Сегодня во всех примерах привела для наглядности скриншоты. Вы же выбираете для себя понравившийся вариант и просто копируете его код. Можно проверить работу кода в этом редакторе.

Вариант 1.

Код

<blockquote>
<p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
<footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>blockquote {
background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%);
padding: 50px 30px;
text-align: center;
position: relative;
color: #49152C;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
font-size: 22px;
margin-top: 30px;
}
blockquote p:before {
content: "\201C";
font-size: 100px;
color: #EA6844;
font-family: serif;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
blockquote cite {
font-style: normal;
}</style>

Вариант 2.

Код

<blockquote>
<p>Лучший модный аксессуар женщины - красивый мужчина.</p>
<cite>Коко Шанель</cite>
</blockquote>

<style>blockquote {
margin: 0;
background: white;
border-top: 5px solid #EAF9F9;
border-bottom: 5px solid #EAF9F9;
color: #3A3C55;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: 20px;
top: 20px;
color: white;
background: #FB6652;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 50px;
line-height: 1.35;
text-align: center;
}
blockquote p {
margin: 0 0 16px;
font-size: 22px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
}</style>

Вариант 3.

Код

<blockquote>
<p>Люди, обладающие хорошим вкусом могут носить бижутерию. Остальные – предпочитают золото.</p>
<footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>blockquote {
margin: 0;
background: #BCE8EA;
color: #131314;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
top: 20px;
left: 16px;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
blockquote:after {
content: "";
width: 4px;
background: white;
position:absolute;
left: 70px;
top: 20px;
bottom: 20px;
}
blockquote p {
margin-top: 0;
font-size: 24px;
font-weight: 300;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
}</style>

Вариант 4.

Код

<blockquote>
<p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
<footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>
blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}</style>

Вариант 5.

Код

<blockquote>
<p>Ничто так не старит женщину, как слишком богатый костюм.</p>
<footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>
blockquote {
margin: 0;
background: #F0F0F1;
color: #333334;
padding: 20px 30px;
position: relative;
border-left: 35px solid #DFDEDE;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: -29px;
top: 5px;
color: #BCBCBC;
font-size: 50px;
text-shadow: 1px 2px 0 white;
}
blockquote p {
margin: 0 0 16px;
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}</style>

В участке кода

<blockquote>
<p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
<footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

Вариант 6.

Код

<p>Текст цитаты</p>

<cite>Автор цитаты</cite>

</blockquote>

<style>

.blockquote-5 {

position: relative;

padding: 16px 24px;

margin: 16px 16px 26px 16px;

font-size: 16px;

border-top: 2px solid #337AB7;

border-bottom: 2px solid #337AB7;

}

.blockquote-5::after {

font-family: Times, sans-serif;

font-weight: bold;

position: absolute;

content: "”";

color: #BFE2FF;

font-size: 160px;

line-height: 0;

bottom: -22px;

right: 30px;

text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;

}

.blockquote-5 cite {

color: #337AB7;

font-size: 15px;

padding-top: 20px;

display: block;

}

</style>

Пишите вашу цитату и имя автора. Общий фон цитат определяется свойством background: и вы легко можете подобрать нужный цвет, если воспользуетесь этой таблицей цветов. При написании сообщения перейдите в режим HTML и установите в нужном месте готовый код.

Пусть страницы ваших сообщений будут привлекательными для посетителей не только полезной и интересной информацией, но и своим оригинальным оформлением.

Сегодня всё. До встречи.

хотите оформить подписку на новые шпаргалки

несколько вариантов оформления страницы 404 с кодами

noreply@blogger.com (Вика) — Wed, 31 May 2023 12:16:00 +0000

Доброго времени суток, друзья. Не так давно обещала выложить варианты оформления страницы 404 в Блоггере. Предлагаю вам несколько таких дизайнерских решений сразу с кодами.

У меня была уже небольшая статья о том для чего нужна эта страница 404 и простые способы её оформления. Кто пропустил можно посмотреть здесь. Я свою страницу меняю очень часто. Очень нравиться что - то новенькое придумать. Так что в старом посте код моей первой страницы ошибка 404.

На данный момент она выглядит так.

Не рассуждая долго, посмотрите подборку оформления страницы вместе с кодами. Все проверены и опубликованы на тестовых блогах для наглядности.

Вариант 1. Тёмная страница с неоновым свечением.

Чтобы посмотреть вбейте в поиск адрес https://b-v-blog.blogspot.com/лоло .

Код

<div id="dendingac_rosanels">
<div class="dendingac_rosanels">
<div class="dendingac_rosanels-404">
<h1>404</h1>
<h2>страница не найдена</h2>
</div>
<a href="http://www.shpargalochki.ru/">можно перейти на главную</a>
</div>
</div>
<style>
#dendingac_rosanels {
position: relative;
height: 100vh;
background: #030005;
}

#dendingac_rosanels .dendingac_rosanels {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.dendingac_rosanels {
max-width: 567px;
width: 100%;
line-height: 1.4;
text-align: center;
}

.dendingac_rosanels .dendingac_rosanels-404 {
position: relative;
height: 180px;
margin-bottom: 20px;
z-index: -1;
}

.dendingac_rosanels .dendingac_rosanels-404 h1 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
transform: translate(-50% , -50%);
font-size: 130px;
font-weight: 900;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -12px;
color: #190327;
text-transform: uppercase;
text-shadow: -1px -1px 0px #8b43ce, 1px 1px 0px #ef256c;
letter-spacing: -20px;
}

.dendingac_rosanels .dendingac_rosanels-404 h2 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 0;
right: 0;
top: 110px;
/* font-size: 42px; */
font-weight: 700;
color: #dadada;
text-transform: uppercase;
text-shadow: 0px 2px 0px #e00cb3;
letter-spacing: 14px;
margin: 0;
}

.dendingac_rosanels a {
font-family: 'Montserrat', sans-serif;
display: inline-block;
text-transform: uppercase;
color: #ff005a;
text-decoration: none;
border: 2px solid;
background: transparent;
padding: 10px 40px;
font-size: 14px;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}

.dendingac_rosanels a:hover {
color: #8400ff;
}

@media only screen and (max-width: 767px) {
.dendingac_rosanels .dendingac_rosanels-404 h2 {
font-size: 28px;
}
}

@media only screen and (max-width: 480px) {
.dendingac_rosanels .dendingac_rosanels-404 h1 {
font-size: 132px;
}
}</style>

Вариант 2. Симпатичная страничка с анимацией и переходом на главную страницу.

Чтобы посмотреть на странице вбейте в поиск https://prostotestblog.blogspot.com/лоо

Код

<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h1>4<span></span>4</h1>
</div>
<h2>Oops! Страница не найдена</h2>
<p>Извините, но страница, которую вы ищете, не существует. Возможно была удалена или временно не доступна</p>
<a href="http://www.shpargalochki.ru/">Вернуться на главную страницу</a>
</div>
</div>
<style>
#notfound {
position: relative;
height: 100vh;
}

#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.notfound {
max-width: 520px;
width: 100%;
text-align: center;
line-height: 1.4;
}

.notfound .notfound-404 {
height: 190px;
}

.notfound .notfound-404 h1 {
font-family: "Montserrat", sans-serif;
font-size: 146px;
font-weight: 700;
margin: 0px;
color: #232323;
}

.notfound .notfound-404 h1 > span {
display: inline-block;
width: 120px;
height: 120px;
background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/mozilla/36/pensive-face_1f614.png");
background-size: cover;
-webkit-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
z-index: -1;
animation-name: floating;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.notfound h2 {
font-family: "Montserrat", sans-serif;
font-size: 22px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
color: #232323;
}

.notfound p {
font-family: "Montserrat", sans-serif;
color: #787878;
font-weight: 300;
}

.notfound a {
font-family: "Montserrat", sans-serif;
display: inline-block;
padding: 12px 30px;
font-weight: 700;
background-color: #f99827;
color: #fff;
border-radius: 40px;
text-decoration: none;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}

.notfound a:hover {
opacity: 0.8;
}

@media only screen and (max-width: 767px) {
.notfound .notfound-404 {
height: 115px;
}
.notfound .notfound-404 h1 {
font-size: 86px;
}
.notfound .notfound-404 h1 > span {
width: 86px;
height: 86px;
}
}

@keyframes floating {
from {
transform: scale(1.4) translate(0, 0);
}

50% {
transform: scale(1.4) translate(0, 15px);
}

to {
transform: scale(1.4) translate(0, 0);
}
}

</style>

Вариант 3. Совсем простая страничка. Картинку можно поменять на более жизнеутверждающую

Чтобы увидеть вбейте в поиск https://teststudiblog.blogspot.com/лоло

Код

<div id="tukortunovounal">
<img src="https://pngicon.ru/file/uploads/ljagushonok-pepe-256x243.png" id="logo404">
<h1>Вау ... Как не хорошо получилось!</h1>
<h2>Пожалуйста перейдите на<a href="http://www.shpargalochki.ru/" target="_blank"> главную страницу</a></h2>
</div>
<style>
.ncelede-dupcoming {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
top: -100px;
opacity: 0.05;
z-index: 230;
user-select: none;
user-drag: none;
}

.mosterta-inlymoved {
text-align: center;
font-family: 'Gilda Display', serif;
font-size: 95px;
font-style: italic;
text-align: center;
width: 100px;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: -60px;
right: 0;
animation: noise 2s linear infinite;
overflow: default;
}

.mosterta-inlymoved:after {
content: '404';
font-family: 'Gilda Display', serif;
font-size: 100px;
font-style: italic;
text-align: center;
width: 163px;
height: 57px;
line-height: 57px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: blue;
animation: noise-1 .2s linear infinite;
}

.tenarkedes {
text-align: center;
font-family: 'Gilda Display', serif;
font-size: 23px;
font-style: italic;
text-align: center;
width: 225px;
height: 58px;
line-height: 59px;
margin: auto;
position: absolute;
top: 153px;
bottom: 0;
left: 0;
right: 0;
animation: noise-3 3s linear infinite;
}

.mosterta-inlymoved:before {
content: '404';
font-family: 'Gilda Display', serif;
font-size: 100px;
font-style: italic;
text-align: center;
width: 97px;
height: 58px;
line-height: 58px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: red;
animation: noise-2 .3s linear infinite;
}

@keyframes noise-1 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: -6px;}
80% {opacity: .3;}
100% {opacity: .6; left: 2px;}
}

@keyframes noise-2 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: 6px;}
80% {opacity: .3;}
100% {opacity: .6; left: -2px;}
}

@keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}
4.3% {opacity: 1; transform: scaleY(1.7);}
43% {opacity: 1; transform: scaleX(1.5);}
}

@keyframes noise-3 {
0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
4.3% {opacity: 1; transform: scaleY(4);}
43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
}</style>

Вариант 4. Вот такая с котейкой. Тоже с картинкой и соответствующими ссылками.

Вбейте в поиск https://test-tri.blogspot.com/лоло

Код

<table width="100%" style="height:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="100%" align="center" valign="top">

<div style="height:400px;width:70%;overflow:hidden;position:relative">
<img src="https://image.freepik.com/free-vector/404_114360-1900.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />
<div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%"><span style="color:purple"><span style="font-family:'Geneva'"><span style="font-size:23pt"><b>Страница 404</b></span></span></span></div> </div>
<tbody><tr>
<td>
<h1>Страница не найдена! (ошибка 404)</h1>
<p>Ну и дела! На сайте <a href="http://www.shpargalochki.ru/"></a> нет такой страницы!<br>
Причины могут быть разные</p>
<ul>
<p>Вы ошиблись, набирая адрес</p>
<p>Страница была давно удалена и ваша ссылка устарела</p>
</ul>
<p><a href="http://www.shpargalochki.ru/">Перейдите на главную страницу сайта ШПАРГАЛКИ БЛОГЕРШИ"</a> чтобы продолжить работу.</p>
</td>
</tr>
</tbody></table>

Во всех кодах пишите свои тексты, меняйте картинки если нужно и вставляйте нужные ссылки на главную, контакты, содержание. Туда куда вы предлагаете перейти пользователю.

Теперь как и куда вставлять коды. Если работаете в старом интерфейсе Блоггер, то в статье, ссылка на которую в начале этого поста, подробно написано про это. В обновлённом интерфейсе, идём тем же путём. Админ-панель - настройки и в длинном списке находим функцию персонализированная страница об ошибке 404. Нажимаем и в открывшемся окне вставляем код, выбранной вами страницы. не забудьте сохранить.

Всё. Обязательно оформляйте вашу страницу с ошибками 404. Пусть она будут интересной и уникальной.

Все добра, удачи и летних денёчков.

хотите оформить подписку на новые шпаргалки

как вернуть изображения в blogger

noreply@blogger.com (Вика) — Sat, 22 Apr 2023 13:20:00 +0000

Всем привет. Давненько я не писала в блоге. Не могу не поделиться с вами, как вернуть, исчезнувшие картинки В блог. Ко мне уже несколько раз обращались мои дорогие читатели с вопросом что с изображениями в блах творится и где искать решение. У меня у самой на всех блогах исчезли сразу все картинки. Восстанавливать заново просто нереально . Руки опустились Но ответ нащла на этом сайте и на форуме blogger

Все адреса с .bp.blogspot.com заблокированы в России.

Просто напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Тут, уже американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет.

Когда мы размещаем картинки свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально.

var images = document.getElementsByTagName("img");

for(var i=0;i<images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,"lh4.googleusercontent.com");

}

</script>

Все адреса с .bp.blogspot.com заблокированы в России.

Просто-напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Да, уж, американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет.

когда вы их размещаете в свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально.

что делать теперь ?

Нашлись умные люди, которые написали скрипт для подмены адресов картинок в блоге с bp.blogspot.com на h4.googleusercontent.com ( это всё зеркальные адреса)

Нужен вот такой скрипт

var images = document.getElementsByTagName("img");

for(var i=0;i<images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,"lh4.googleusercontent.com");

}

</script>

В скрипте src.replace(/[1-4]+.bp.blogspot.com/,"lh4 -наши блокированные домены с 1.bp до 4.bpэто блокированные домены с 1.bp до 4.bp.

Как вставить скрипт,чтобы в блоге появились все пропавшие картинки снова.

Копируйте данный скрипт. Заходите во вкладку Тема, Сделайте (на всякий случай), резервную копию шаблона В открывшимся окне Нажимаем на оранжевую кнопку и выбираем изменить HTML

Далее, находим в шаблоне закрывающийся тег </body>. Он обычно конце шаблона прописан. И над ним вставляем,

Не забудьте сохранить изменения. Возвращаемся в блог и видим, что все картинки на своём месте. В моём случае во все свои блоги установила скрипт и все фото встали на место. Было настроение совсем удалить блоги. Но вот такая уловка сработала и стало веселее. Хотя, конечно, есть определённая нагрузка от лишних скриптов, но хоть что-то. Проблема с картинками отпала.

Здесь вы можете оформить подписку на новые шпаргалки

Как выделить все содержимое для копирования кликом по кнопке

noreply@blogger.com (Вика) — Wed, 18 May 2022 13:46:00 +0000

Всем, доброго времени суток. Сегодня задача заключается в том, как выделить весь DIV, Span текст при щелчке мыши по кнопке с помощью JavaScript для копирования. Многие блогеры используют подобную опцию, чтобы дать своим посетителям не прокручивать содержание всего блока для копирования, а одним щелчком мыши скопировать сразу всю область.

Что в итоге имеем

Выделяется все содержимое DIV/Span/Textarea с помощью кнопки.

Чистый JavaScript-Код.

Простота в использовании

Вы можете добавить неограниченное количество DIV даже на одну страницу / пост.

Вы можете добавить CSS стили на ID.

Он отменит выделение всего содержимого DIV/Span/Textarea так же с помощью кнопки.

Нам понадобиться вот такой готовый код, который вы сразу, тут же на странице, сможете легко проверить (кликните по кнопке скопировать и вставьте у себя в черновике или блокноте), чтобы посмотреть, как это работает

Как это добавить на страницу

В сообщении переходим в формат HTML и в строке, отмеченной синим цветом, вставляем свой текст.

Для вебмастеров, которые публикуют свои коды для копирования, порядок немного другой. Следует сначала декодировать код. У меня здесь ENCODER кодов. Установить, так же как с текстом, вместо строки синего цвета этот декодированный код. Перейдя в формат вёрстки результат будет, как в примере выше.

Для нового Div на той же странице добавьте только этот код Div снова, но измените execodediv0 на execodediv1 в двух местах и т. д. Потом сохраните и всё.

Для информации предлагаю статью по теме - как копировать текст в буфер обмена кликом.

Здесь вы можете оформить подписку на новые шпаргалки

код плеера для аудио, которое можно хранить на Гугл Диске.

noreply@blogger.com (Вика) — Mon, 21 Feb 2022 14:00:00 +0000

Доброго времени суток, уважаемые читатели и гости блога. Сегодня у меня в гостях, человек творческий., который любезно согласился поделится для нас информацией, которая, на мой взгляд может пригодиться многим при ведении и оформлении блога.

Здравствуйте меня зовут Борис. Я долгое время читаю Блог Виктории "Шпаргалки Блогерши" и он меня радует своей простотой.

Код плеера мне достался даром и поэтому я решил поделиться им с людьми так же даром. Потому что в поиске практически не найдешь такой пост который я хочу написать для Вас. Такой же финт я пробовал сделать с кодом для фото и видео чтобы хостингом был непосредственно Гугл Диск.

Значит, первым делом загружаем аудиофайл на хостинг Гугла Google Disk в формате WAW, MP 3, Windows. Файл может быть и большой но желательно не очень большой так как он начнет сам сбиваться.

Открываем доступ к файлу для всех. Копируем прямую ссылку в блокнот или в поле вставки плеера в блоге. Затем вырезаем из нее индификационный номер файла и вставляем его в поле кода для плеера. Сохраняем.

Копируем номер из прямой ссылки на файл

Вставляем номер файла сюда

Плеер сохранен и воспроизводится

Главное работать с кодом и ссылкой корректно.

Чтобы плеер располагался ровно можно использовать тег <br /> <center />

Так же можно выставить код в разметке страницы HTML по центру. Тогда плеер можно установить в блоге, где нибудь с боку или сверху по центру. Как подскажет вам ваша творческая фантазия.

Так же, к плееру можно добавить ширину. Для Этого в команду кода вставляем тег <with>

Ширина плеера

Код без расширения

Как вы видите в команду audio controls добавлен тег style

Тогда плеер получится такой или такой...

Тогда плеер можно делать как шире так и уже.

Еще к плееру можно нарисовать свою кнопочку. Для этого к коду добавляем графический тег <img> и кнопочку <button> и вуаля ваш плеер работает персонально у вас в блоге без дополнительной регистрации и ограничения в загрузке.

Код для аудиоплеера:

1 вариант.

<br/>

2 вариант. С картинкой/кнопкой

<audio id="audio" src="https://drive.google.com/uc?export=download&confirm=no_antivirus&id=1AGNq6csVLhMZL3fjDErcZ7lCcu5i92Cw" type="audio/mpeg" controls ></audio><button onclick="document.getElementById('audio').play()">Play</button><button onclick="document.getElementById('audio').pause()">Pause</button><button onclick="document.getElementById('audio').volume+=0.1">Vol +</button><button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

Хостингом для картинки можно использовать как сам блоггер так и сторониие ресурсы например Радикал.ру

Так же вы можете скачать файл напрямую с плеера и изменить звук и скорость воспроизведения. Если конечно же ваш браузер поддерживает расширение аудио.

Другой способ вставки плеера

Плеер во всплывающем окне с кнопкой

Для этого просто копируем код плеера и вставляем в код всплывающего окна и сохраняем. Только гаджет блоггер работает так что если размер окна выставляешь больше то меньше назад его можно сделать только если стереть пустой виджет и создав новый виджет сохранить код с конечной разметкой ширины и высоты окна. В окно можно к плееру вставить что угодно, текст картинку, видео или ссылку.

Я попробовал вставить в окно даже интернет радио из WinAmip

Получилось здорово. В кнопке бегущая строка.

<a href="http://79.120.39.202:8000/pop80" onclick="newMyWindow(this.href); return false;"><button><marquee scrollamount="3" width="100" height="20"style="font-size: 14pt; ">Слушать... </marquee></button> </a>

function newMyWindow(e) {

var h = 150,

w = 250;

window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

}

</script>

Как вставить аудиоплеер другим способом я могу подсказать вам в записанном мною видео в Ютубе. Таким же способом можно для блога вставить и картинку и видео и ворд файл, а так же сделать поле для чтения и горячую ссылку для возможности Скачать одним кликом.

Видео https://youtu.be/Zcpx14hLpUo

Спасибо за консолидацию!

Если возникнут вопросы или, что-то не совсем понятно, пишите в комментариях к этому посту.

фиксированная панель в верхней части блога для нужной информации (3 варианта)

noreply@blogger.com (Вика) — Thu, 10 Feb 2022 14:15:00 +0000

Доброго времени суток, друзья. Предложу вам 3 варианта оформления панелек, где вы сможете отобразить какие - то важные сообщения с кликабельными ссылками.

Обновление поста В качестве примера я сделала переход на страницу содержание своего блога. У вас могут абсолютно другие варианты, куда вы захотите перенаправить читателя - на ваши паблики в социальных сетях, форму контактов, другие ваши блоги.

Такие яркие панели всегда привлекают внимание. Разместить их можно над гаджетом страницы, чтобы сразу обратили внимание на себя. Не плохо будет смотреться под шапкой блога или над ней.

Реализация достаточно простая. Нужно выбрать понравившейся вариант, скопировать код и установить его в разделе дизайн в гаджет HTML/JavaScript. И перетянуть в нужное место макета блога. Цвета самой панели меняйте на ваше усмотрение.

Принцип работы у всех одинаковый, я разнообразила их только стилями. Все варианты в работе можно посмотреть на тестовом блоге.

Демонстрация

Вариант 1. Простая панель с рамкой и кликабельной надписью.

Код.

border: 4px double black;

background: #fc3;

padding: 10px;

} color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}

#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}

#knigulper_bar a:hover{background:#3e454c;color:#fff;}

</style>

Все статьи блога для вас <a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>

</div>

Вариант 2. Тёмная панель уже с другой рамкой , где ссылка оформлена в виде кнопки.

Код.

<style>#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c;border: 3px solid #ff6347 ;
border-radius: 10px; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}</style>
<div id='knigulper_bar'>
Все статьи блога для вас<a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 3. Панель с бегущей строкой.

Задали немного динамики с помощью тега marquee и получили такую динамичную бегущую строку. Еще в этом варианте, кроме основной ссылки, добавлена ссылка на последнюю статью блога. Но это можно легко убрать, если посчитаете нужным.

С помощью свойства box-shadow зададим красивые границы с тенью.

Код.

В строках, отмеченных розовым цветом пишите адреса страниц, на которые ведёт ссылка. Пояснительный текст, соответственно, измените на ваш вариант.
Как видим, всё просто. Если есть задумка, попробуйте поиграться со стилями CSS. Если пока сложно, берите готовые коды.

Приветственный бар в верхней части блога
Фиксированная панель в нижней части блога.

Спасибо всем за внимание и до встречи.

хотите оформить подписку на новые шпаргалки

три варианта кнопок с эффектом пульсации

noreply@blogger.com (Вика) — Tue, 30 Nov 2021 06:19:00 +0000

Приветствую вас, уважаемые читатели и гости блога.

Продолжаю подборку красивых кнопок для блога. На этот раз сделаем пульсирующие кнопочки. Такие обязательно привлекут внимание посетителей. Установить их можно и в самом сообщение, и в гаджет HTML/JAVAScript. Это могут быть, какие-то объявления или переходы на другую станицу.Все предложенные варианты кнопок в работе можно посмотреть в этом редакторе. Просто скопируйте код у установите в поле на странице редактора

1. Пульсирующая овальная кнопка

Код.

<div class="dingovaila-besticsia">
<div class="vengumpn-koveemen"><a href="http://www.shpargalochki.ru/">Нажми на меня!</div>
</div>
<style>
.vengumpn-koveemen {
display: flex;
justify-content:
align-items: center;
width: 167px;
height: 43px;
color: #3e3e54;
font-weight: bold;
border: 1.1px solid #acafb7;
background: #f7eded;
border-radius: 80px;
animation: radial-pulse 1s infinite;
font-size: 20px;
}
.dingovaila-besticsia {
width: 100%;
height: 100vh;
background-color: #328096;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes radial-pulse {
0% {
box-shadow: 0 0 0 0px rgba(23, 22, 22, 0.5);
}
100% {
box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
}
}
</style>

/div>

Я отметила цветом фон для большей выразительности. Можно эту строку в коде удалить.

2. Чёрная квадратная кнопка

Код

<div class="button"><h1>Кнопка</h1></div>
</div>
<style>
.button{
width: 150px;
padding: 5px 0;
margin: 30px auto 0;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
text-align: center;
background: rgba(41, 41, 41, 0.88);
color: #e6a833;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(0, 0, 0,.5);
cursor: pointer;
}
@keyframes play_top {
0%
{
-webkit-box-shadow: 0 0 rgba(0,163,182,.6);
-moz-box-shadow: 0 0 rgba(0,163,182,.6);
box-shadow: 0 0 rgba(0,163,182,.6);
}
to
{
-webkit-box-shadow: 0 0 0 20px rgba(0,163,182,0);
-moz-box-shadow: 0 0 0 20px rgba(0,163,182,0);
box-shadow: 0 0 0 20px rgba(0,163,182,0);
}
}
@keyframes play_down {
0%
{
-webkit-box-shadow: 0 0 rgba(55,55,55,.6);
-moz-box-shadow: 0 0 rgba(55,55,55,.6);
box-shadow: 0 0 rgba(55,55,55,.6);
}
to
{
-webkit-box-shadow: 0 0 0 20px rgba(55,55,55,0);
-moz-box-shadow: 0 0 0 20px rgba(55,55,55,0);
box-shadow: 0 0 0 20px rgba(55,55,55,0);
}
}
</style>

3. Маленькая круглая кнопка

Код

width:200px;

height:100%;

margin:0 auto 0}

.casetug-posavun {

position: relative;

top: 50%;

left: 50%;

margin-left: -32px;

margin-top: -32px;

display: block;

width: 53px;

height: 53px;

font-size: 14px;

font-weight: normal;

color: #f5f0f0;

text-shadow: 0 1px 0 #0f3354;

border: 1px solid #1d71c1;

box-shadow: 0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #98c4ec;

border-radius: 100%;

background: #62a8e8;

background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #6eace4), color-stop(100%, #4f93d4));

background-image: -webkit-linear-gradient(#64a0d6, #3f86ca);

background-image: linear-gradient(#66a3da, #3f88ce);

cursor: pointer;

-webkit-animation: pulse 1s infinite cubic-bezier(0.6, 0, 0, 1);

}

.casetug-posavun:hover{

-webkit-animation:none}

@-webkit-keyframes pulse{

to{

box-shadow:0 0 0 23px rgba(81, 147, 218, 0), inset 0 1px 0 #9ec3e6}

}</style>

Соответственно, чтобы сделать надписи на кнопках кликабельными в Дивах пишем так

<a href="http://www.shpargalochki.ru/">Текст</div>

Вставляем адрес страницы, куда будет переход по ссылке.

С цветом и размерами кнопок тоже можно поиграть во всех кодах.

На сегодня всё. Хочется надеяться, что такие пульсирующие кнопки найдут применение на ваших блогах. До встречи.

Виджет последних статей блога и комментариев бегущей строкой

noreply@blogger.com (Вика) — Fri, 19 Nov 2021 03:38:00 +0000

Доброго времени суток, читатели и гости блога. Давно на блоге был опубликован пост виджет последних сообщений BLOGGER в виде стикера. Обратила внимание, что на некоторых блогах мои подписчики установили такой. Предложу, в качестве альтернативы, ещё вариант более лёгкий, где названия последних статьей будут выводиться бегущей строкой. С кликабельными ссылками А ещё, на основе того же скрипта покажу, как можно сделать такой же виджет с последними комментариями блога и виджет последних статей определённого ярлыка. Может, кому-то и такие варианты подойдут для блога.

Внешний вид виджетов легко настраиваемый под ваш дизайн. Перед тем как приступить к установке и разбору настроек, давайте смотреть на рабочий вариант.

Для просмотра попрошу перейти вас на тестовый блог.

Демонстрация

1. Виджет последних сообщений бегущей строкой

Код

Настройки виджета

Все настройки помечены цветом.

Ширина задана 100%; можно менять в зависимости от макета блога.

Высота строки 20px; тоже настраиваемая, меняйте по желанию

Максимальное количество постов поvar nMaxPosts =10; по вашему желанию. В примерах я задала 10.

Цвет background-color:#556B2F;"> строки на ваше усмотрение

Цвет текст задан color:#FFF белым цветом

при наведении курсора и остановке текста color:#FDFDFD красный

Толщина и цвет border: 1px solid #000; рамки так же по желанию

Скорость var nScrollDelay = 0; прокрутки регулируется

Ну и наконец, в этой https://bvd-2.blogspot.com/feeds/posts/default строке нужно вставить адрес вашего блога (будьте внимательны с символами).

2. Виджет последних комментариев бегущей строкой

Здесь уже проще. Тот же самый код, только в строке

участок https://bvd-2.blogspot.com/feeds/posts/default замените участок feeds/posts/default на feeds/comments/default.

3. Виджет последних стаей определённого ярлыка.

Меняем так же , только прописываем название нужного ярлыка, статьи которого хотим показать в бегущей строке. В этом случае, нужно быть внимательным к регистру. Допустим у меня ярлык КАРТИНКИ все крупным шрифтом, так и нужно писать . А не так Картинки. Пишем так

https://bvd-2.blogspot.com/feeds/posts/default /-/КАРТИНКИ

Код каждого из вариантов или все их сразу устанавливаем в гаджет (гаджеты) HTML/JavaScript и располагаем где-нибудь над сообщениями или под шапкой блога.

Вот и всё на сегодня. Всем добра и до встречи

Выезжающая панель при клике на кнопку

noreply@blogger.com (Вика) — Thu, 04 Nov 2021 06:18:00 +0000

Доброго времени суток, уважаемые читатели и гости блога. Хочу показать вам, как на странице блога сделать оригинальную выезжающую панель в которой можно разместить любую информацию-текстовую, изображение, код, форму связи. Всё что угодно. Стили панели настраиваются под любой дизайн. и самое главное она без подключения всяких скриптов и библиотек. На чистом CSS. При клике на кнопку Открыть панель появляется с правой стороны. Аналогично кнопкой Закрыть панель возвращается на исходную позицию К тому же красивая тень закрытой панели,заданная свойством box-shadow придаст оригинальность.

Это только фото

Для просмотра скопируйте код и расположите его в этом редакторе

<div class="side-title">Выдвижная панель:</div>

<p>Информация в панеле -здесь можно разместить всё, что угодно - текст, изображение, форму связи, код

</p><img src="https://i.pinimg.com/originals/19/6e/c7/196ec72878f83afeac3ffb84306d9ac4.png" width="250" height="200" alt="ёж">

</div>

<div class="side-b side-open">Открыть</div>

<div class="side-b side-close">Закрыть</div>

</label>

</div>

<style>

/* стили панели */

#side-checkbox {

display: none;

}

.side-panel {

position: fixed;

z-index: 999999;

top: 0;

left: -360px;

background: #306754; /*общий фон панели */

transition: all 0.5s;

width: 320px;

height: 100vh;

box-shadow: 10px 0 20px rgba(0,0,0,0.4);

color: #FFF;

padding: 40px 20px;

}

.side-title {

font-size: 20px;

padding-bottom: 10px;

margin-bottom: 20px;

border-bottom: 2px solid #BFE2FF;

}

/* Оформление кнопки */

.side-button-1-wr {

text-align: center; /* Контейнер для кнопки, */

}

.side-button-1 {

display: inline-block;

}

.side-button-1 .side-b {

margin: 10px;

text-decoration: none;

position: relative;

font-size: 20px;

line-height: 20px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto Condensed', Тahoma, sans-serif;

background: #1d4569; /* цвет кнопки открыть,закрыть */

cursor: pointer;

border: 1px solid #f5faff;

}

.side-button-1 .side-b:hover,

.side-button-1 .side-b:active,

.side-button-1 .side-b:focus {

color: #FFF;

}

.side-button-1 .side-b:after,

.side-button-1 .side-b:before {

position: absolute;

height: 4px;

left: 50%;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.side-button-1 .side-open:after,

.side-button-1 .side-open:before {

background: green;

}

.side-button-1 .side-close:after,

.side-button-1 .side-close:before {

background: green;

}

.side-button-1 .side-b:before {

top: -6px;

}

.side-button-1 .side-b:hover:after,

.side-button-1 .side-b:hover:before {

width: 100%;

left: 0;

}

/* Переключатели кнопки 1 */

.side-button-1 .side-close {

display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {

display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {

display: block;

}

#side-checkbox:checked + .side-panel {

left: 0;

}

/* Оформление кнопки на панеле */

.side-button-2 {

font-size: 30px;

border-radius: 20px;

position: absolute;

z-index: 1;

top: 8px;

right: 8px;

cursor: pointer;

transform: rotate(45deg);

color: #BFE2FF;

transition: all 280ms ease-in-out;

}

.side-button-2:hover {

transform: rotate(45deg) scale(1.1);

color: #FFF;

}

</style>

Все основные настройки я пометила комментариями в самом коде. Нужную информацию размещайте в тегах <p>текст </p>. пример привела с текстом и картинкой, адрес которой выделен цветом. Меняйте на свой. Сам код выдвижной панели, как всегда устанавливаем в редакторе сообщений, перейдя в режим HTML.

Спасибо за внимание и до встречи. Всем добра.

Красивый эффект движения картинки в круге

noreply@blogger.com (Вика) — Thu, 28 Oct 2021 04:18:00 +0000

Доброго времени суток, дорогие читатели и гости блога. Предлагаю вам попробовать просто завораживающую анимацию движения изображения в сфере от которой не отвести глаз. И вся эта красота создаётся на чистом CSS.

А пока посмотрите в этом редакторе на результат того, о чём идёт речь. Невероятно красивый эффект. Скопируйте код и установите в поле редактора. Настройки разберём ниже.

<div class="planet planetEarth">
<div class="container">
<div class="earth"></div>
</div>
</div>
<style>
.planetEarth{
position: relative;
min-width: 60%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #182357;
}
.earth{
position: absolute;
width: 300px;
height: 300px;
background: #f00;
border-radius: 50%;
background: url(https://i1.wallbox.ru/wallpapers/main/201551/e74a8ffac9938d4.jpg);
background-size: cover;
animation: earth 20s linear infinite;
box-shadow: inset 0 0 20px #03A9F4,
0 0 120px #03A9F4;
}
.planet .container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-box-reflect: below 1px linear-gradient(#0001,#0002);
}
@keyframes earth
{
0%
{
background-position: 0;
}
100%
{
background-position: 162.5%;
}
}
</style>

Хочу добавить пояснительный текст к некоторым настройкам

background: #182357; цвет фона вокруг круга

earth{

position: absolute;- абсолютное позиционирование

width: 340px;ширина - окружности

height: 340px;высота окружности

background: #f00;- цвет общего фона

border-radius: 50%;-закругление углов у блока

background: url(planet.jpg);- адрес картинки в круге

background-size: cover;- пропорционально растянутая фоновая картинка

animation: earth 20s linear infinite;- продолжительность, и непрерывная анимация

box-shadow: inset 0 0 20px #03A9F4,- размытая рамка и цвет теней

0 0 120px #03A9F4;

}

.planet .container{

width: 100%; - отступы обнуляем

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

-webkit-box-reflect: below 1px linear-gradient(#0001,#0002);- зеркальное отражение

Конечно, в качестве более наглядного примера выбрана планета. Можно привести любое изображение. Попробуйте, чтобы долго не искать хотя бы эту ссылку на картинку вставить.

https://i.ytimg.com/vi/JX7giiYkHno/maxresdefault.jpg

Играть с этим можно сколько угодно. Думаю, многие найдут применение такому эффекту движения картинки в сфере. У меня просьба, если сделаете свой вариант, дайте знать пожалуйста, уж очень посмотреть хочется.

автор эффкета porsake на CodePen

на CodePen

Выпадающие блоки на CSS

noreply@blogger.com (Вика) — Sun, 17 Oct 2021 04:12:00 +0000

Доброго времени суток, уважаемые читатели. Часто, при написании сообщения, приходится скрывать часть информации, Это может быть спойлер или полоса прокрутки, или блок когда по клику можно открыть содержимое полностью.

Для этого и создадим сегодня красивый по стилистике блок, где будет несколько вкладок с их названием и содержанием. Что очень удобно на любом тематическом ресурсе, так как есть возможность вписать туда текст, вставить картинку, видеообзор, код. Точнее сказать это продолжение страницы, которое содержат огромную часть написанного текста. Такой, назовём его спойлер -аккордеон.

Всё это без подключения библиотек и лишних скриптов. Блоки выполнены на чистом CSS. Одним словом, такие вкладки используют тогда, когда много текста на странице.

К тому же, такие блоки повышают поведенческий фактор. Пользователю не нужно долго икать то, что его интересует, главное правильно задать заголовок. Нажав на нужное, открывается вся информация. Зададим ещё кнопки закрытия.

Давайте уже тестировать.

Скопируйте предложенный код и разместите в поле этого редактора

<div class="wrapper">
<div class="half">

<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Первая вкладка</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Вторая вкладка</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Третья вкладка</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
<style>
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #008b8b;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
.blue label {
background: #2980b9;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #025669;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.blue .tab-content {
background: #3498db;
}
.tab-content p {
margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
max-height: 100vh;
}
/* Icon */
.tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.tab input[type=checkbox] + label::after {
content: "+";
}
.tab input[type=radio] + label::after {
content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}</style>

Можно рассмотреть такой вариант для создания меню аккордеон на сайте.

По необходимости добавляйте или убирайте дополнительные блоки

<div class="tab">
<input id="tab-two" type="checkbox" name="tabs" />
<label for="tab-two">Вторая вкладка</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>

Меняйте цветовые решения на свои-свойства background:

Соответственно, ваша информация в табах (вкладках) и заголовки

Для применения на странице блога, готовый код вставляем в редакторе в формате HTML или в гаджет HTML/JAVASCRIPT в любом месте макета блога.

Вот такой простой и в то же время достаточно функциональный метод подачи информации

Как поставить знак ударения в HTML

noreply@blogger.com (Вика) — Wed, 06 Oct 2021 04:23:00 +0000

Всем, доброго времени суток. Хочу показать, как просто поставить знак ударения в слове при написании сообщения. Часто вижу, что просто выделяют ударную буквы крупным шрифтом или дают поправку в скобках. В русском языке часто встречаются слова - омографы. Допустим парОм — пАром, Сорок — сорОк и другие. Если в обычной речи мы ставим произношением ударение на нужный слог, то в письменной форме, конечно же, необходимо поставить знак ударения.

Как же поставить ударение в коде- HTML?

Всё достаточно просто. Использовать будем специальные символы, которые применяются в формате HTML при создании страницы. В редакторе сообщения Блоггер есть функции установки символов в тексте, но я не увидела знака ударения, сколько не пробовала. Да и мне легче при необходимости прописать знак ударения в HTML, не так уж часто это используется в тексте. И такой вариант проще.

Все символы начинаются с использованием амперсанда (&) и это так:

&здесь имя;

&#DD; здесь код символа

<так пишется вот такой символ <, а так > наоборот >

Ну это, для расширения кругозора. Всё же, вернёмся к знаку ударения в тексте.

Когда пишем сообщение и есть необходимость поставить ударение, переходим из обычного формата в формат HTML, пишем так

В режиме HTML пишем всегда плачу́ Получается ↣ всегда плачу́

В режиме HTML пишем всегда пла ́чу Получается ↣ всегда пла́чу

Отмеченные цветом символы и будут отображать знак ударения.

То же самое с другим кодом

Пишем в формате древний замо́к Получаем ↣ древний замо́к

Пишем в формате древний за́мок Получаем ↣ древний за́мок

Попробуйте в черновике, чтобы освоить такое не хитрое дело.

Модальное окно при закрытии страницы сайта

noreply@blogger.com (Вика) — Wed, 29 Sep 2021 04:46:00 +0000

Привет, всем. Знаю, знаю, знаю, что всякого рода модальные всплывающие окна раздражают почти всех. Однако, бывают сайты, где они необходимы. Лично и спокойно отношусь к таким, когда при выходе со страницы появляются достаточно интересные всплывающие окна. Призывы остаться и не уходить иногда и правда вызывают улыбку.

Рассмотрим 2 варианта таких всплывающих окон.

Суть в том, когда пользователь подводит курсор в верхнюю часть вкладки чтобы закрыть её, такое окно появится.

Вариант 1. Окно будет появляться на каждой странице и после того, как страница будет перезагружена

Примет этого варианта можно увидеть на тестовом блоге. Зайдите на блог и затем подведите курсор к верху вкладки.

Демонстрация

Я вам дам весь скрипт целиком. Для работы всплывающего окна нам понадобится библиотека jQuery, разметка HTML, сами стили CSS и не большой JAVASCRIPT.

Весь код целиком устанавливаем в гаджет HTML/JavaScript в любом месте шаблона блога.

Вариант 2. Окно будет всплывать только 1 раз в сутки и если пользователь провёл на блоге меньше 20 секунд. Для реализации используются cookie.

Устанавливаем куку через 20 секунд. Можно 10, 15 или больше, как пожелаете. Если посетитель провёл больше времени, окно не показывается. Для этого поменяем только последний код JavaScript. Остальные коды библиотека jQuery, разметка HTML, сами стили CSS оставляем как в первом варианте.

В коде HTML пишите свой текст, картинки, стили текста.

<h1>Aaaa...Не уходите!!!</h1>
<p><span style="color: #FF6347; font-size: large;">Есть еще много статей на сайте, которые Вам могут понравиться!!! Останьтесь!!!</span></p>
<div align="center">
<img width="30%" border="0" src="https://cs8.livemaster.ru/storage/86/71/bdb58b31073019ce02401b21775j.gif" />
</div>
</div>
<div class="closeblock">+</div>
</div>

Попробуйте использовать такие ненавязчивые и прикольные модальные окна на блоге.

Обтекание текстом круглых изображений

noreply@blogger.com (Вика) — Fri, 24 Sep 2021 04:08:00 +0000

Пост обновлён и дополнен.

Всем, доброго времени суток. Очень красиво смотрится на веб - страницы обтекание картинки текстом. При стандартном варианте, даже если ваша картинка имеет круглую форму или форму какой - то фигуры, текст будет располагаться как обычно. Наверняка вы видели на многих сайтах, когда текст полностью обтекает картинку по её фигуре. И это легко реализуется с помощью CSS.

Используя свойство shape-outside можем задать различные значения.
Базовыми вещами являются «основные фигуры». Они имеют следующие функции:

circle() - круг; ellipse() - эллипс или овал; polygon() – многоугольник.

Я для примера предложу вам готовые коды, чтобы было понятно и просто реализовать их на странице блога. Кого это заинтересует более детально, информации в сети достаточно..

1. В первом примере ниже будем использовать shape-outside чтобы изогнуть текст вокруг изображения. Вот так это будет выглядеть на страничке. Картинка при этом любая.

Код такой

<style>

.circle {

float: left;

shape-outside: circle(50%);

clip-path: circle(50%); /*Для картинки*/

}

</style>

<p>

текст текст текст

</p>

2. Обтекание овального изображения

Для создания эллипса или овала, используем функцию ellipse():
Обычно значения для радиуса задаются по осям X и Y.

Весь код

<style>
.ellipse {
float: left;
shape-outside: ellipse(35% 50%);
clip-path: ellipse(35% 50%); /* Для картинки */
}
</style>

<img src="адрес картинки" class="ellipse">
<p>
текст текст текст
</p>

3. Любая фигура. Сделаем просто многоугольник.

Все точки фигуры тоже задаются по осям.

Код такой

<style>
.polygon {
float: left;
shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%); /* для картинки */
}
</style>
<img src="адрес картинки" class="polygon">
<p>
текст текст текст
</p>

В последнем варианте можно задать, что взбредёт на ум. Поиграйтесь со значениями

shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%);

Обратите внимание, что они должны быть одинаковые для текста и изображения. Всё это делаем прямо в редакторе сообщений, перейдя в режиме HTML.

Есть масса вариантов создания таких эффектов. Было бы желание. Попробуйте сами.

здесь можно оформить подписку на новые шпаргалки

Разноцветные буквы или текст в сообщении

noreply@blogger.com (Вика) — Tue, 14 Sep 2021 04:54:00 +0000

Всем, привет. Опять игры с буковками или пост из серии варианты оформления текста в сообщении. Очень просто в редакторе Блоггер сделать разноцветные буквы или даже текст в любых вариациях.

К примеру, вот так.

Всем привет меняющийся текст из цветных букв и слов!

Можно варьировать в верхней панели редактора разные варианты шрифта -тип, размер, жирный, курсив, цвет, выделяя каждую буковку. И, если затем перейти в режим HTML, обратите внимание, что мы имеем строчный элемент <span> ( англ. span — охватывать), который предназначен для выделения отдельных строк, символов или других строчных элементов и изменения их оформления с помощью стилей.

Как -то так для каждой буквы

Таким образом, с применением разных стилей к тексту или отдельным буквам получаем такой эффект. Вы можете попробовать у себя в редакторе сообщений. Если кому не хочется или лень, вот код для моего примера. Заменяйте на свои буквы и всё.

</font>

Одним словом - элемент <span> используется для изменения стилей участка текста.

Всем спасибо и до встречи.

Эффектное увеличение картинки с всплывающим описанием

noreply@blogger.com (Вика) — Sat, 04 Sep 2021 06:14:00 +0000

Доброго времени суток, друзья и читатели блога. Предлагаю вашему вниманию интересный эффект увеличения картинки с всплывающим описанием при наведении курсора. Так сказать, два в одном. Подобных вариантов увеличения и описания изображений достаточно много. В данном случае мы будем использовать HTML-теги figure. Мы уже применяли их при создании анимированной картинки или карточки.

Здесь просто картинка, а результат в действии можно посмотреть здесь в редакторе. Просто скопируйте код и установите его в поле редактора.

Обращу ваше внимание на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure, допустим, на figure 1.

Такой эффект можно применить ко всем изображениям. Нужно установить код CSS в шаблоне блога, но без тегов <style> и </style>. Делаем так. Вкладка Тема - изменить HTML- найти строку ]]></b:skin> и над ней устанавливаем этот код CSS.

Потом, при написании поста, в том месте, где нужна картинка с эффектом увеличения и описания, ставим, перейдя в режим HTML, этот участок (разметку)

<div class="test">
<figure id="figure-hover">
<img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
<figcaption>
Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>
</figcaption>
</figure>
</div>

Соответственно замените на свои адреса картинок и описание.

При редком использовании эффекта весь код, который предложен выше копируем и вставляем, опять же в редакторе в формате HTML.

Очень эффектно смотрятся картинки с при применении этого кода.

Всем добра, увидимся.

Несколько примеров оформления текста

noreply@blogger.com (Вика) — Fri, 20 Aug 2021 06:31:00 +0000

Доброго времени суток, уважаемые читатели. Продолжаю играть с эффектами текста и предложу ещё несколько вариантов, которые выполнены на чистом CSS. Все вы можете увидеть прямо на странице этого сообщения. Коды достаточно простые, устанавливаются в редакторе в формате HTML.

Давайте смотреть.

Текст с обводкой

Вот такой текст с обводкой

Код

<div class="no-ie">Вот такой текст с обводкой</div>

<style>

.no-ie {

font-size: 2em;

-webkit-text-stroke: 1px darkgrey;

-webkit-text-fill-color: transparent;

margin-bottom: 1em;

}

</style>

Можно сделать обводку используя полупрозрачность

Код

<style>

h1{font-size: 34px;

color: black;

-webkit-text-stroke: 1px rgba(0,0,0,0.5);

-webkit-text-fill-color: rgba(0,0,0,0.1);

}

</style>

<h1>или вот такой</h1>

/div>

Растянутый текст. Вот так примерно

Вот такой растянутый текст

Код

letter-spacing: 2px;

display: inline-block;

font-size: 38px;

transform: scaleY(0.5);

transform-origin: 0 0;

margin-bottom: -50%;

}

span {

font-size: 18px;

vertical-align: top;

}</style>

<span class="stretched-text">Вот такой растянутый текст </span>

Разноцветный текст

С помощью большого количества тэгов font и его атрибутов: color и size можно сделать симпатичные разноцветные буковки

меняющийся текст из цветных букв и слов!

Код примерно такой, устанавливается в режиме HTML в редакторе сообщений.

</font>

/div>

Для каждой буквы, как вы видите, используем вот такие стили. <font color="#22AA44" size="5"> Тут только всё зависит от фантазии.

Все статьи про варианты оформление текста можно посмотреть здесь.

Всем удачи и до встречи

Как просто вставлять коды в тело поста BLOGGER ( 2 варианта)

noreply@blogger.com (Вика) — Tue, 10 Aug 2021 13:41:00 +0000

Доброго времени суток, друзья. Пост в первую очередь для новичков Блоггер и тех, кто пока не знает как вставить коды в тело поста для для оформления определённого участка, цитаты или других целей. Многие просто боятся что - то сделать не так. Поэтому решила подробно написать об этом и показать. Пробовать вы можете просто в черновике и в режиме просмотра уже будет виден результат.

(Пост обновлённый, дополненный и подкорректированный.)

В статье про красивое оформление участка текста я приводила несколько вариантов. Оттуда и взяла первый код в качестве примера сегодня. Полностью код такой. Я отметила наклонным шрифтом код CSS. Это стили и, именно они, отвечают за внешний вид. А внизу небольшая строка кода HTML.

<style>.set {
font-size:16px;

color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>

<div class="set ">здесь ваш текст</div>

Кстати, код который вы видите, оформлен тоже подобным образом, но в другом варианте. В конце статьи я дам несколько ссылочек с разными стилями оформления.

Давайте уже разберёмся , как это легко оформить, а то слишком долгое вступление получилось. Рассмотрим 2 способа.

Вариант 1

Проще всего это сделать используя блокнот. Это одна из стандартных программ-компонентов ОС Windows. Она прилагается к любой версии этой операционной системы в обязательном порядке. Откройте «Пуск» и перейдите во «Все программы». Выбираете папку «Стандартные» и кликните по «Блокнот». У кого 10 - ка или другие ОС немного по другому.

Сейчас копируете предложенный код и устанавливаете его там. И там же, вместо строки «здесь ваш текст» пишите тот текст, который нужно выделить. Теперь просто уже из блокнота копируете то, что получилось и в редакторе BLOGGER, переходите в формат HTML. В нужном месте вашей статьи его вставьте.

Вариант 2.

Если вы написали уже сообщение и хотите в тексте оформить участок, в том месте, где это предполагается, так же переходите на формат HTML и вставляем первую часть кода CSS. В примере это участок, заключённый в теги <style>......</style> о нём я писала в начале поста

Потом в конце выделяемого участка устанавливаем HTML код . В примере это класс "set "

<div class="set ">здесь ваш текст</div>

Опять же, там где написано "здесь ваш текст", должно быть то, что вы хотите выделить. Вот такой примерно результат

Вот что в итоге у нас должно получиться после всех не сложных манипуляций с применением этого кода. Красота.

Даже если у вас сразу не получается и результат в режиме просмотра не виден, не отчаивайтесь. Удалите содержания поста в черновике и попробуйте снова. Потихоньку придёт понимание что да как.

Здесь ещё стоит обратить внимание на один момент. Если выделяется таким образом стихотворение или список, то нужно между строками обязательно в конце прописывать тег </dr> (он переносит текст на другую строку).

Кодов для возможности красиво оформить веб - страницу или части её, очень много. И согласитесь, что это и воспринимается легче, чем сухой текст, как бы вы его не выделили цветом или шрифтом.

И ещё небольшое дополнение. Если вы остановились на каком - то одном определённом варианте оформлении участка текста, и именно его предполагаете использовать всегда, то лучше установить код CSS непосредственно в шаблоне блога перед строкой ]]></b:skin>, но только уже без тегов <style>......</style> . Потом только при необходимости останется добавить в тело поста только строку кода HTML. У меня именно так в шпаргалках для выделения всех кодов сделано.

Если что - то не донесла ещё или не совсем понятно, пишите в комментариях.

Вот, как обещала некоторые ссылки

Как оригинально оформит участок в тексте
3 варианта оформления участка в тексте
Цитата или участок в текст

Ещё больше других вариантов оформления текста можно увидеть на странице «все статьи» в меню сверху в разделе «текст».

Удачи всем и до встречи.

здесь можно оформить подписку на новые шпаргалки

Слайдер в виде картины

noreply@blogger.com (Вика) — Tue, 03 Aug 2021 03:54:00 +0000

Доброго времени суток, друзья. Предлагаю вам сегодня слайдер в виде картины с рамкой и красивым hover эффектом. При наведении курсора появляются кнопки навигации. Код рассчитан на 4 изображения. Без подключения всяких библиотек, на чистом CSS.

Изменяя именно эти стили, вы сможете создать свой вариант рамки.

А пока просто скопируйте предложенный код и установите его в этом редакторе для просмотра

Код

<ul class="slider_picture">
<li>
<input type="radio" id="slide1" name="slide" checked="">
<label for="slide1"></label>
<img src="https://1.bp.blogspot.com/-c5WhHzMtp7I/XvxT7Vb4C5I/AAAAAAAAN30/FgsR3FDkBxc1LKwb4sPm8upqUU2cUd9BgCLcBGAsYHQ/s320/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="https://1.bp.blogspot.com/-CKVoPPWefWg/XvykUkaB70I/AAAAAAAAN4s/WmbJwXJaU00c3-LJLhTqV0lM-kh8lUIAgCLcBGAsYHQ/s320/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="https://1.bp.blogspot.com/-ClqZp0F0EhI/Xvxaj_bGmWI/AAAAAAAAN4A/9SJLgOAwge8FSLxEmL7xUqii6_K6zovfgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide4" name="slide">
<label for="slide4"></label>
<img src="https://1.bp.blogspot.com/-r_qLer5dx_Y/XvymH0FKf5I/AAAAAAAAN44/kR7CObqOI-UBVHgI5nk3wYkzP-ntkW8dgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
</li>
</ul> <style>
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em}
.slider_picture:before{background-color:#800000;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1}
.slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1}
.slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute}
.slider_picture input{display:none}
.slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10}
.slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em}
.slider_picture:hover label{opacity:1;visibility:visible}
.slider_picture input:checked + label{background-color:#fff}
.slider_picture:hover li:nth-child(1) label{left:.5em}
.slider_picture:hover li:nth-child(2) label{left:2em}
.slider_picture:hover li:nth-child(3) label{left:3.5em}
.slider_picture:hover li:nth-child(4) label{left:5em}
.slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden}
.slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}</style>

Замените строки , выделенные цветом, на адреса ваших картинок. Поэкспериментируйте со значениями background (цветом фона), значениями box-shadow, , которое задаёт тень блокам. Для тона и насыщенности в коде используется цвета в формате hsla.

Вроде, кака и все настройки. Код достаточно лёгкий. Можно смело установить в самом сообщении, перейдя в формат HTML при написании сообщения или в гаджет HTML/JavaScript в любом месте макета блога.

Можно сделать ещё слайдер видео в блоге.

Всем добра и до встречи.

Где спрятались Ё, Ъ, точка с запятой, длинное тире и кавычки на телефоне

noreply@blogger.com (Вика) — Fri, 23 Jul 2021 04:54:00 +0000

Некоторые из советов кому-то из вас покажутся примитивными. Однако практика показывает, что многие люди об этих деталях даже не догадываются. А ещё складывается впечатление, что самые сложные знаки препинания для нас — это длинное тире и кавычки-ёлочки.

На самом деле клавиатура смартфона содержит всё, что нужно для счастья для работы. Посмотрим на два скриншота

Мы видим, что, кроме стандартных букв, выделенных чёрным, есть ещё маленькие серенькие символы. Так вот, чтобы набрать на клавиатуре один из этих сереньких значков, нужно всего лишь долго нажимать на соответствующую кнопку. Например, знак номера мы получим, если зажмём букву «Х» (тут на скрине он скрыт, не поместился). Знак процента — это буква «А». За скобочки у нас отвечают «л» и «д».

Даже если этих знаков нет (они включаются в настройках клавиатуры «Показывать дополнительные символы»), то всё равно подразумеваются.

Либо переключаемся на блок с цифрами и значками (скриншот № 2) и получаем нужные знаки на блюдечке.

1. Как набрать на клавиатуре букву «Ё»

Да очень просто. Долго жмём на букву «Е». Причём независимо от клавиатуры: Swiftkey, Яндекс-клавиатуры и др. Этой букве достаётся всегда: на компьютерной клавиатуре её загнали куда подальше, чтобы до неё трудно было дотянуться, на телефонах спрятали тоже. Её даже не видно среди маленьких сереньких значков.

2. Как набрать на клавиатуре твёрдый знак «Ъ»

Долго жмём на мягкий знак. От клавиатуры не зависит. Бывает что найти «Ъ» — это для кого-то проблема. Однако он есть, живой и невредимый. Жмём и держим «Ь». Вот, смотрите:

3. Длинное тире

Жмём долго на клавишу дефиса. В зависимости от клавиатуры у вас покажутся три чёрточки, только их порядок может быть разным. Чаще всего это длинное тире, среднее тире (для числовых диапазонов и номеров телефонов) нижнее подчёркивание).

4. Кавычки-ёлочки

Открываем цифровой блок, долго жмём на символ компьютерных кавычек, перед нами откроются сразу два вида кавычек: «ёлочки» и „лапки“.

5.Точка с запятой

Этот знак и на компьютере не все знают, как найти, а уж на телефоне и подавно. И действительно, запрятан он серьёзно. Либо зажимаем (долго жмём) букву «Т», либо жмём на 123 (обычно слева внизу), где у нас все цифровые символы и прочие знаки, и жмём на клавишу двоеточия.

6. Как найти символ №

К сожалению на большинстве раскладок в андроид нашего доброго знака № нет!(( Под нашим знаком № имеют ввиду символ «#» если производитель внес на своей раскладке № то очень повезло нажимаем на символ «#» и должен появится заветный "№"

по материалам

Стоит всего раз поиграть с клавишами и всё потом пойдёт, как по маслу.

Подборка красивых кнопок на CSS

noreply@blogger.com (Вика) — Sun, 18 Jul 2021 04:26:00 +0000

Доброго времени суток, друзья. Полистала свой блог и сколько уже постов про разные кнопки в блоге, а вот про варианты оформления этих кнопок, нет ни одного. Вот решила поделиться с вами несколькими примерами, как, использую CSS можно создать красивые и оригинальные кнопочки.

Применить их можно для разных случаев. Например, оформить ссылку в виде кнопки в блоге, сделать кнопку <<скачать>> или <<демонстрация>> и т.д. Вот последнюю я и приведу в качестве примера.

Для наглядной демонстрации и просмотра эффекта кнопок, перейдите на страницу редактора кодов и установите код любой кнопки в его поле. В статье только фото кнопок.

Раскрывающаяся кнопка

<a href="###" class="transform-button"><span>Демонстрация 1</span></a>
<style>
.transform-button {
position: relative;
display: inline-block;
text-decoration: none;
padding: 10px 30px;
margin-right: 20px;
border: 1px solid #68E5F7;
background: transparent;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
perspective: 500px;
background: white;
transition: .3s;
}
.transform-button:last-of-type {
margin-right: 0;
}
.transform-button span {
position: relative;
z-index: 2;
}
.transform-button:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #556B2F;
transform-origin: left;
transition: .5s;
}
.transform-button:hover {
color: #556B2F;
border-color: #556B2F;
}
.transform-button:hover:before {
transform: rotateY(92deg);
}
</style>

Кнопка с анимацией и эффектом перечёркивания

<div class="button-wrapper">
<a href="###" class="arrow-btn">Демонстрация<span></span></a>
</div>
<style>
.button-wrapper {
max-width: 400px;
margin: 50px auto;
text-align: center;
overflow: hidden;
}
.arrow-btn {
position: relative;
display: inline-block;
padding: 15px 30px;
text-decoration: none;
color: #2fc989;
border: 4px solid #2fc989;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .4em;
transition: .2s;
transition-delay: .1s;
}
.arrow-btn:hover {
color: white;
padding: 15px 35px;
}
.arrow-btn span {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
overflow: hidden;
transition: .35s cubic-bezier(.215, .61, .215, 1);
}
.arrow-btn span:before {
content: "";
position: absolute;
top: -5%;
left: -210%;
width: 200%;
height: 108%;
background: #2fc989;
transform: skew(-15deg, 0);
transition: .5s;
}
.arrow-btn:after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: -1000%;
height: 2px;
margin-top: -1px;
width: 400%;
background: #2fc989;
transition: .5s;
}
.arrow-btn:hover:after {
width: 140%;
left: -20%;
}
.arrow-btn:hover span:before {
left: -25%;
}
</style>

Кнопка с анимированной рамкой

<a href="###" class="action-btn">Демонстрация</a>
<style>
.action-btn {
position: relative;
display: inline-block;
padding: 8px 20px;
margin: 20px;
text-decoration: none;
font-family: 'Comfortaa', cursive;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color: #112D52;
background: #FF5438;
border: 2px solid #112D52;
transition: .4s linear;
}
.action-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 130%;
width: 91%;
border: 2px solid #112D52;
transform: translate(-50%, -50%);
z-index: -1;
}
.action-btn:hover {
background: #112D52;
color: #FF5438;
}
</style>

Простая анимированная кнопка

<a href="###" button class="button-1">Демонстрация</button>

Кнопка с анимацией и радужной рамкой

<a href="###" class="glow-button">Демонстрация</a>
<style>
.glow-button {
text-decoration: none;
display: inline-block;
padding: 15px 30px;
margin: 10px 20px;
border-radius: 10px;
box-shadow: 0 0 40px 40px #e3a9be inset, 0 0 0 0 #32D4E2;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
letter-spacing: 2px;
color: white;
transition: .15s ease-in-out;
}
.glow-button:hover {
box-shadow: 0 0 10px 0 #32D4E2 inset, 0 0 10px 4px#32D4E2;
color: #F137A6;
</style>

Вместо решёток в кодах устанавливаем адрес страницы, куда будет осуществлён переход при клике. Соответственно вашае название. И во всех вариантах можно "играть" c цветом общего фона, цветом при наведении, цветом текста. Пишите в комментариях, кому потребуется корректировка в изменениях. Готовый код, как всегда, устанавливаем в теле сообщения в режиме HTML или в гаджете в макете.

Красивые кнопки не только функциональны. Они всегда обращают на себя внимание читателей и служат украшением дизайна.

Всем хороших денёчков и до встречи.

горизонтальное меню с эффектом анимации

noreply@blogger.com (Вика) — Sat, 10 Jul 2021 04:42:00 +0000

Доброго времени суток, друзья. Очередное горизонтальное меню с эффектом анимации. С виду совершенно простое, а при наведении на пункты менюшки получаем выделение цветом в виде полукруга.

Немного напоминает вариант меню с zoom - эффектом, которое прижилось на некоторых блогах читателей.

Вы можете посмотреть меню в работе. Скопируйте код и установите в этом редакторе.

Настройки стандартные и все закомментированы в коде. Сложности не возникнет.

Вместо "##########" вставляйте адреса страниц, куда будет осуществлён переход при клике.

Меняйте background: #a71b15; цвет под дизайн вашего блога.

По необходимости добавляйте или убирайте пункты горизонтального меню - <li><a href="##########"><exespan>Главная</exespan></a></li>

В Блоггере код меню устанавливаем в гаджет HTML/JavaScript и перетягиваем его под шапку блога или над сообщениями.

Вот и всё. До встречи.

создание баннера или заголовка с помощью свойства clip-path

noreply@blogger.com (Вика) — Sat, 03 Jul 2021 04:29:00 +0000

Доброго времени суток, друзья. Свойство clip-path создаёт область отсечения: внутри которой контент видно, а вне её – нет. Одним словом определяем, какая часть элемента должна отображаться. Тема весьма интересная, с неограниченными возможностями. Кого она заинтересует - информации много. Я же хочу предложить сегодня, как можно задать стили заголовка и статей в Блоггер или создать баннер блога, без фотошопа и других редакторов.

Вот, самый простой вариант оформления баннера с использованием свойства clip-path

Мы, как бы, разделим цвет и фон текста. Скопируйте код и вставьте его в поле этого редактора. для просмотра.

Код

<div class="h1" data-heading="шпаргалки блогерши ">
шпаргалки блогерши
</div>
<style>
.h1 {
text-align: center;
position: relative;
margin: 0;
box-sizing: border-box;
padding: 20px 105px;
font-family: Verdana, sans-serif;
font-weight: bold;
color: #FFF;
font-size: 46px;
line-height: 56px;
background:#009b76; /*общий фон*/
border: 8px solid #c0dcc0; /*размер и цвет рамки*/
z-index: 1;
text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);
text-transform: uppercase;
transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}
@media screen and (max-width: 780px) {
.h1 {
font-size: 26px;
line-height: 36px;
}
}
.h1:after {
content: attr(data-heading);
position: absolute;
padding: 20px 10px;
box-sizing: border-box;
left: 0;
z-index: 2;
overflow: hidden;
white-space: wrap;
width: 100%;
height: 100%;
top: 0;
text-align: center;
color: #BFE2FF; /*цвет текста*/
text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);
background: #a4e0cf;/*цвет фона разделительной фигуры*/
clip-path: polygon(0 0, 100% 0, 100% 10%, 0 100%);
}</style>

Можно до бесконечности играться со значениями свойства clip-path: а именно теми, что отмечены цветом. Таким образом изменить угол разделения. Вообще, если кому интересно, можно набрать в поиске, как создаются потрясающие эффекты с помощью clip-path.

Я приведу несколько примеров.

Заменим все значения lip-path, допустим, на такие 50% 0%, 100% 50%, 50% 100%, 0% 50%

Результат

Или вот такие значения 0 46%, 100% 15%, 55% 74%, 0 100%

Имеем уже другое

Ещё раз повторюсь, здесь нет ограничений в творчестве и это не займёт много времени. Можно придавать различные формы и собирать их в композиции. Есть много онлайн генераторов, где можно задать любой угол, это можно применить и к изображениям. Вот самый простой. Там всё понятно. Формируете нужную фигуру и получаете значения clip-path.

Комментарии по цвету в самом коде.

Ширина всего блока - 780px

Со всеми цветами rgba, которые задают значение тени текста text-shadow тоже играйтесь на своё усмотрение. Вместо фона можно вставить изображение, как вариант. Замените в коде любой background: на такую строку background: url('здесь адрес фоновой картинки');

Во всех случаях исходный заголовок дублируется и накладывается на оригинал. Потом этот дубль обрезаем под нужным углом с помощью свойства clip-path. Ну вот как - то так.

Если возникнут вопросы по настройкам, не стесняйтесь спрашивать в комментариях.

Спасибо за внимание и до встречи.

появление блока при прокрутке страницы

noreply@blogger.com (Вика) — Thu, 24 Jun 2021 04:50:00 +0000

Доброго времени суток, друзья. Есть множество способов, для создания появляющегося и исчезающего блога при скроллинге страницы. Сегодня вашему вниманию представляю ещё один из вариантов. При прокрутке страницы в низ, появится блог с любой информацией и исчезнет при прокрутке обратно. Код простой и легко устанавливается на странице блога.

Скопируйте код и установите его в этом редакторе для наглядности примера.

В участке кода

можно вставить в появляющийся блок всё, что душа пожелает - картинку, текст, код, баннер, приветствие или другую информацию. Ну и размеры задать нужные.

Изменяя значение функции .scrollTop() > 200 ? 'In': 'Out')](500); можно подкорректировать расположение блока.

При применении на странице пишем сообщение в обычном режиме и, в том месте, где предполагается появление блока, переходим в режим HTML.

Информация в самом блоке, соответственно Ваша.

Всем добра и до встречи.

Горизонтальное меню с лёгким движением вкладок при наведении

noreply@blogger.com (Вика) — Fri, 11 Jun 2021 04:39:00 +0000

Доброго времени суток, дорогие читатели. Горизонтальное меню с разноцветными вкладками, при наведении курсора. Зададим ещё лёгкое движение вкладкам менюшки, использую свойство transform. Очень легко можно настроить под любой дизайн.

Посмотрите, как оно выглядит на тестовом блоге.

Демо

Код меню

<ul class="main-ul">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Об авторе</span></a></li>
<li><a href="#"><span>Все статьи</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
<li><a href="#"><span>Инструменты</span></a></li>
<li><a href="#"><span>Соглашение</span></a></li>
<li><a href="#"><span>Форма связи</span></a></li>
<li><a href="#"><span>Вопросы и ответы</span></a></li>
</ul>
<style>
.main-ul li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
background-color: rgba(000, 000, 000, 0.2);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.main-ul li a span {
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: rgba(120, 120, 120, 0.9);
text-transform: uppercase;
font-family: 'Kotta One', serif;
}

.main-ul li:hover span {
color: #fff;
}
.main-ul li:nth-child(1):hover a {
background-color: rgba(175,54,55,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(2):hover a {
background-color: rgba(199, 204, 73, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.main-ul li:nth-child(3):hover a {
background-color: rgba(213, 135, 11, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.main-ul li:nth-child(4):hover a {
background-color: rgba(51, 143, 144, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.main-ul li:nth-child(5):hover a {
background-color: rgba(117,18,98,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.main-ul li:nth-child(6):hover a {
background-color: rgba(33, 136, 215, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.main-ul li:nth-child(7):hover a {
background-color: rgba(109, 109, 109, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.main-ul li:nth-child(8):hover a {
background-color: rgba(152, 120, 92, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
</style>

Меню рассчитано на 8 вкладок. Думаю, больше и не стоит.

Настройки совершенно простые

Общий цвет фона менюшки - background-color: rgba(000, 000, 000, 0.2);

Размер и цвет текста - font-size: 20px; color: rgba(120, 120, 120, 0.9);

По необходимости убирайте участки в коде

.main-ul li:nth-child(8):hover a {
background-color: rgba(152, 120, 92, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

Во всех этих участках background-color: rgba(152, 120, 92, 0.8); именно цвет который меняется при наведении на неё курсора мыши. Все эти цвета заданы в формате RGBA. Можно воспользоваться для подбора этим конвертером https://colorscheme.ru/color-converter.html.

Вот такое горизонтальное разноцветное меню имеем.

Можно посмотреть ещё одно простое горизонтальное меню с zoom - эффектом и подчёркиванием. Или много других вариантов в категории Меню.

Возникнут вопросы, пишите в комментариях. И до встречи.